import React from 'react';

import clsx from 'clsx';

/**
 * Props 类型定义，继承自原生 div 元素属性
 * @property {boolean} [inverted] - 是否反转深浅色模式，true 时为浅色背景
 */
export interface DarkModeContainerProps extends React.ComponentProps<'div'> {
	inverted?: boolean;
}

/**
 * 深色/浅色自适应容器组件
 *
 * 用于包裹内容并根据 inverted 属性切换深浅色主题，支持所有 div 原生属性
 * @param {React.PropsWithChildren<DarkModeContainerProps>} props - 组件属性
 * @returns {JSX.Element} 渲染后的容器元素
 *
 * @example
 * // 默认深色背景
 * <DarkModeContainer>内容</DarkModeContainer>
 *
 * // 浅色背景
 * <DarkModeContainer inverted>内容</DarkModeContainer>
 */
const DarkModeContainer: React.FC<React.PropsWithChildren<DarkModeContainerProps>> = ({
	children,
	className,
	inverted = false,
	...rest
}) => {
	return (
		<div
			className={clsx(
				// 默认深色背景及字体
				'bg-container text-base-text transition-300',
				// inverted 为 true 时切换为浅色背景
				{ 'bg-inverted text-#1f1f1f': inverted },
				className
			)}
			{...rest}
		>
			{children}
		</div>
	);
};

export default DarkModeContainer;

/**
 * =====================
 * 组件使用示例与说明
 * =====================
 *
 * // 1. 默认深色背景用法
 * <DarkModeContainer>
 *   <p>深色模式内容</p>
 * </DarkModeContainer>
 *
 * // 2. 浅色背景用法
 * <DarkModeContainer inverted>
 *   <p>浅色模式内容</p>
 * </DarkModeContainer>
 *
 * // 3. 传递自定义 className 和其他 div 属性
 * <DarkModeContainer className="my-custom-class" style={{ padding: 24 }}>
 *   <span>自定义样式内容</span>
 * </DarkModeContainer>
 *
 * // 4. 结合布局组件使用
 * <Layout>
 *   <DarkModeContainer inverted>
 *     <h2>标题</h2>
 *     <p>正文内容</p>
 *   </DarkModeContainer>
 * </Layout>
 *
 * @see DarkModeContainerProps 类型定义
 */
